<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<body style="height: 2000px;">
    <div style="background-color: burlywood;height: 400px;">
        <image id="home4" src="https://2021.igem.org/wiki/images/e/e4/T--SZPT-CHINA--team-home_4down.png"
            style="margin-top: 50px;margin-left: 200px;"></image>
        <br>
    </div>
    <image id="home4bottom" src="https://2021.igem.org/wiki/images/c/cd/T--SZPT-CHINA--team-home_4c.png"
        style="margin-left: 135px;"></image>
    <!-- <image src="https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif" ></image>
    <image src="https://2021.igem.org/wiki/images/3/39/T--SZPT-CHINA--team-home_4gb.gif" ></image> -->

</body>
<script>
    $(document).ready(function () {
        // 设置监听回到顶部
        var stimer = null;

        // 监听滚动停止
        let t1 = 0;
        let t2 = 0;
        let timer = null; // 定时器

        var p = 0,
            t = 0;
        var updownkey = 0;
        //console.log('body:' + $(document.body).height())
        //console.log('windos:' + $(window).height())
        $(window).scroll(function () {
            //console.log('距离:' + $(document).scrollTop())
            p = $(this).scrollTop();
            if (t < p) {
                //console.log('下' + p)
                //下滚
                if (document.getElementById('home4').getAttribute("src") == "https://2021.igem.org/wiki/images/e/e4/T--SZPT-CHINA--team-home_4down.png") {

                } else {
                    document.getElementById('home4').setAttribute("src", "https://2021.igem.org/wiki/images/e/e4/T--SZPT-CHINA--team-home_4down.png");
                }

            } else {
                //console.log('上' + p)
                //上滚    
                if (document.getElementById('home4').getAttribute("src") == "https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--team-home_4up.png") {

                } else {
                    document.getElementById('home4').setAttribute("src", "https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--team-home_4up.png");
                }
            }
            //console.log("p:" + p)
            // 进度条动静态切换
            if (p > 50) {
                if (p < 300) {
                    p = p - 10;
                    setTimeout(function () { t = p; }, 1000)
                    scrollTop = p
                    t1 = $(window).scrollTop()
                    var value = document.getElementById('home4').getAttribute("style");
                    value = value.match(/margin-top: (\S*)px/)[1];
                    //console.log("px:" + value);
                    var top = parseInt(parseFloat(0) + 1.10 * parseFloat(scrollTop))
                    //console.log("top:" + top)

                    document.getElementById('home4').setAttribute("style", "margin-top: " + top + "px;margin-left: 200px;");

                }
                if (p < 300) {
                    if (updownkey == 1) {
                        console.log("消失")
                        var bottomsrc = document.getElementById('home4bottom').getAttribute("src");
                        if (bottomsrc == "https://2021.igem.org/wiki/images/3/39/T--SZPT-CHINA--team-home_4gb.gif") {

                        } else {
                            document.getElementById('home4bottom').setAttribute("src", "https://2021.igem.org/wiki/images/3/39/T--SZPT-CHINA--team-home_4gb.gif");
                        }
                        updownkey = 0;
                    }
                }
                if (p >= 300) {
                    console.log("出现")
                    updownkey = 1;
                    var tt = document.getElementById('home4');//选取id为test的元素
                    tt.style.display = 'none';	// 隐藏选择的元素

                    var bottomsrc = document.getElementById('home4bottom').getAttribute("src");
                    if (bottomsrc == "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif") {

                    } else {
                        document.getElementById('home4bottom').setAttribute("src", "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif");
                    }

                }
            }
        })

    })

</script>

</html>